<div class="topic-sidebar card">
  <div class="card-header">大家都在关注的专栏 <i class="fa fa-columns"></i></div>
  <div class="card-body row">
    <% Column.hot.limit(5).each_with_index do |column, index| %>

      <% if index == 0 %>
        <div class="sidebar-column col-md-12">
          <div class="media">
            <div class="media-left media-middle mr-3">
              <img class="media-object avatar-48" src="<%= column.cover_url %>">
            </div>
            <div class="media-body">
              <h4 class="media-heading sidebar-column-name"><%= render_column_name(column.name, column.slug) %></h4>
              <p><%= user_name_tag column.user %></p>
            </div>
            <div class="media-right">
              <div class="sidebar-count"><%= column.articles_count %> 篇</div>
            </div>
          </div>
          <div class="sidebar-description"><i><%= column.description %></i></div>
        </div>

      <% else %>
        <div class="col-md-6 sidebar-column-second-level">
          <div class="sidebar-column">
            <div class="media">
              <div class="media-left media-middle">
                <img class="media-object avatar-48" src="<%= column.cover_url %>">
              </div>
              <div class="media-body ml-2">
                <h4 class="media-heading">
                  <div class="sidebar-column-name">
                    <%= render_column_name(column.name, column.slug) %>
                  </div>
                </h4>
                <p><%= user_name_tag(column.user, {class: "sidebar-column-user-name"} )%></p>
              </div>
            </div>
            <div class="sidebar-description"><i><%= column.description %></i></div>
          </div>
        </div>
      <% end %>
    <% end %>
  </div>
</div>
